Mac與iPad的側邊欄、工具欄、上下文選單欄、選單欄(模式)
Sidebar 側邊欄與 ToolBar工具欄
A Sidebar側邊欄(Mac和ipad專屬)。側邊欄是提供進入特定位置或文件集合的入口。而不要展示具體的檔案內容。
/Untitled.png)
/Untitled 1.png)
在使用者介面中,側邊欄要明確表達出當前被選中的視窗。當前視窗處於啟用狀態時,圖示、選擇高亮和側邊欄背景本身被設計成半透明的風格。反之當視窗變為非活動狀態時,這些效果會消失。其目的是為了讓系統識別出當使用者操作時,哪個視窗將對鍵盤輸入做出響應
/Untitled 2.png)
/Untitled 3.png)
別用純色、圖片、圖案之類的東西填充側邊欄。
/Untitled 4.png)
B ToolBar 工具欄。把控制按鈕放在工具欄裡,使用者更容易找到它們,工具欄提供了更穩定的使用者體驗。
/Untitled 5.png)
工具欄讓資訊流動自上而下的方式呈現。
/Untitled 6.png)
iPad應用中有任何操作可以設計在螢幕的底部邊緣,
/Untitled 7.png)
在mac的設計中就不可以,因為Mac視窗的很容易拖動到下邊緣這樣操作區就會被(dock或螢幕邊緣)遮擋。
/Untitled 8.png)
若放操作到工具欄裡,代表這裡的操作是全域性操作(而不是特定應用於某個區域的內容)
/Untitled 9.png)
工具欄可以根據當前的上下文動態地提供相關操作,使介面更加靈活和適應性強。
例如在Finder視窗裡選了個檔案,工具欄就會包括可以對這個檔案進行操作的功能
/Untitled 10.png)
如果在資料夾內什麼都沒選,工具欄上的操作功能就只針對於資料夾。綜上所述,工具欄的功能會隨著使用者對下面的內容選擇而進行著動態的變化
/Untitled 11.png)
Contextual menus 上下文選單欄
上下文選單是幕後英雄,雖不顯眼,但十分重要。
A 它們讓使用者知道可以對物件執行哪些操作,操作直接出現在滑鼠旁邊,用起來很方便。
/Untitled 12.png)
在Mac上,使用者都希望到處都能用到上下文選單,因此按邏輯,元素都應該加上下文選單。這確保了功能的即時可訪問性和相關性
/Untitled 13.png)
無論macOS還是iOS的上下文選單,基本的設計規則都是一樣的。6個設計規則:
/Untitled 14.png)
1 避免給使用者提供太多選項,只關注最相關的功能。太多的選項增加尋找資訊的難度,同時導致選單過長,需要很長時間去瀏覽
2 要簡潔,一般一個詞的標籤就夠了
/Untitled 15.png)
3 用動詞或動詞短語來清楚表明操作的結果
4 注意命令的排布順序,將最重要的內容放在頂部,然後將相關專案組合在一起
5 使用分隔符(橫線)明確命令之間的關係。將命令組合在一起可以非常有意義,這有助於使用者在認識到前一兩個命令與當前需求無關時跳過整組命令
/Untitled 16.png)
6利用子選單來控制選單的長度,把不需要的操作隱藏起來。子選單是典型的逐步展示的例子,他透過減少複雜性來簡化使用者的決策過程
/Untitled 17.png)
Menu bar 選單欄
每個軟體都有選單欄,選單欄是Mac體驗的核心,從1984年就有了。選單欄是電腦變得好用的一個關鍵因素。
/Untitled 18.png)
上下文選單設計策略:
1.Don't overwhelm(不要讓使用者感到不知所措):
這條規則強調選單項的數量應適中,避免過多的選項使使用者難以快速做出選擇。一個清晰、簡潔的選單可以幫助使用者更快地理解可用的選項,從而提高決策的效率。
2. Manage complexity with submenus(用子選單管理複雜性):
當選單項過多或者分類複雜時,可以使用子選單來組織資訊,從而避免一次性展示過多內容。子選單可以幫助使用者按需導航,使得介面看起來更加整潔。
3. Be succinct(簡潔明瞭):
選單項的描述應簡短有力,避免冗長的文字。簡潔的文字有助於使用者迅速理解每個選項的功能,減少理解上的負擔。
4. Convey action(明確動作):
每個選單項應清楚地傳達它的動作或結果,例如,“儲存”、“刪除”、“編輯”等動詞可以直接說明點選後的操作,幫助使用者預期其後果。
5.Order(順序):
選單項的排列順序應邏輯清晰,常用的或者重要的功能應放在更顯眼或者容易訪問的位置。邏輯順序可以提升使用者的操作直觀性和效率。
6. Groups are great(分組很有用):
將相關的選項分組可以提高選單的可讀性。例如,可以將所有“編輯"功能放在一組,所有“檢視”選項放在另一組。這樣的分組可以幫助使用者快速找到所需的功能。
7. Keep menus stable(保持選單穩定):
選單的內容和佈局在不同頁面間應保持一致,避免因為變動過大導致使用者混淆。穩定的選單結構可以增強使用者的記憶,使得操作更加自然和高效。
/Untitled 19.png)
設計選單欄的過程非常有趣。你要把一個人在你軟體裡能做的所有事都寫下來,然後記錄這些操作影響哪個物件。這個過程很重要因為軟體裡的每個動作都應該能在選單欄找到。
這樣做使得它們更容易被發現,並且允許人們為它們分配鍵盤快捷鍵,這也讓只用鍵盤操作電腦的人更方便使用這些功能。
/Untitled 20.png)
macOS包含一套標準的選單項(按照特定功能和應用場景)
/Untitled 21.png)
對於很多應用來說,這些標準選單已經夠用了,但有時候還得加些特製的選單。如果應用裡有一些主要的物件型別含有對應的操作,可以考慮設定一個或兩個頂級選單
/Untitled 22.png)
/Untitled 23.png)
例如,在郵件應用中,有兩種主要的物件型別:郵箱和郵件。這些物件能進行很多操作,但是這些操作不能互換到另一種物件上去。
/Untitled 24.png)
因此為每種物件都設一個選單按鈕是挺合適的。有時按照所屬的整個工作流程來組織操作也很有用。
/Untitled 25.png)
Keynote中新增了多種不同的物件型別,有一整套操作用於對齊和分佈、鎖定、分組、前移或後移物件
/Untitled 26.png)
因為所有操作以類似的方式影響所有物件,基於服務的工作流程將它們放在一起合理的。
/Untitled 27.png)
一個穩定的選單有助於人們學習命令的位置,即使這些命令當前不用。當有人看到一個不能用的命令時,使用者會明白現在不能進行這個操作,這其實是很有用的資訊
/Untitled 28.png)
給最常用的命令設定快捷鍵。喜歡用鍵盤的使用者會在Mac和iPad上感激這項功能,並且是跨平臺的功能。
/Untitled 29.png)